import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:hkzf_flutter/widgets/common_image.dart';

// 轮播组件

// 默认图片
final  List<String> defaultImages = [
  'https://picsum.photos/750/500?random=${DateTime.now().millisecondsSinceEpoch}', // 随机图片服务（HTTPS）模拟网络加载
  'https://img0.baidu.com/it/u=3453008842,3158521755&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
  'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tdgve1j30ku0bsn75.jpg',
  'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2whp87sj30ku0bstec.jpg',
  'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tl1v3bj30ku0bs77z.jpg',
];
// 图片默认高度(宽750px,高424px)
var imgWidth = 750.0;
const imgHeight = 350.0;

class CommonSwiper extends StatefulWidget {
  // 轮播图片列表
  final List<String> imgList;
  // 图片高度
  final double height;
  CommonSwiper({super.key,List<String>? imgList,double? height}): imgList = imgList ?? defaultImages,height = height ?? imgHeight;

  @override
  State<CommonSwiper> createState() => _CommonSwiperState();
}

class _CommonSwiperState extends State<CommonSwiper> {
  int _current = 0;
  late CarouselSliderController _controller;

  @override
  void initState() {
    super.initState();
    _controller = CarouselSliderController();
  }

  @override
  Widget build(BuildContext context) {
    // 计算等比例缩放后图片的高度
    var height = MediaQuery.of(context).size.width / imgWidth * widget.height;
    return Stack(
      alignment: Alignment.topCenter, // 整体内容顶部居中对齐
      children: [
        // 轮播图构造器
        CarouselSlider.builder(
          carouselController: _controller,
          options: CarouselOptions(
            height: height, // 轮播容器高度
            autoPlay: true, // 是否自动播放
            enlargeCenterPage: true, //启用后中间 item 略大，有立体感；
            aspectRatio: 16 / 9, // 宽高比 16:9,确保在不同设备上保持一致的画面比例；
            viewportFraction: 0.8, // 每个轮播占 80% 宽度：左右会留出空隙，适合滑动浏览。
            onPageChanged: (index, reason) {
              setState(() {
                _current = index;
              });
            },
          ),
          itemCount: widget.imgList.length,
          // 轮播图 item 构建器
          itemBuilder: (context, index, realIndex) {
            final url = widget.imgList[index];
            return Container(
                padding: const EdgeInsets.symmetric(vertical: 10), // 添加上下 padding 10px
                child: Container(
                  width: MediaQuery.of(context).size.width, // 设置宽度为屏幕宽度（全屏）；
                  // margin: const EdgeInsets.symmetric(horizontal: 5.0),// 添加左右 margin，让轮播图之间有空隙；
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10.0), // 设置容器圆角半径为 10.0
                    boxShadow: const [
                      BoxShadow(
                        color: Color.fromARGB(76, 0, 0, 0), // 0.3 不透明度 ≈ 76 / 255, 阴影颜色
                        spreadRadius: 2, // 阴影扩散半径
                        blurRadius: 5, // 模糊半径
                        offset: Offset(0, 2), // 阴影偏移量
                      ),
                    ],
                    // image: DecorationImage(// 直接使用网络图片
                    //   image: NetworkImage(url),
                    //   fit: BoxFit.cover, // fit: BoxFit.cover 表示图片按比例填充容器，并裁剪超出部分；
                    // ),
                  ),
                  child:ClipRRect(
                    borderRadius: BorderRadius.circular(10.0), // 图片圆角
                    child:  CommonImage(// 使用封装的带缓存的图片组件
                        src: url,
                        width: MediaQuery.of(context).size.width,
                        height: height,
                        fit: BoxFit.cover,
                    ) ,
                  )
                  
                ));
          },
        ),

        // 小圆点指示器（定位在底部）
        Positioned(
          // 将子组件定位在父组件的特定位置，这里设置 bottom: 20 表示距离底部 20px。
          bottom: 20, // 距离底部 20px
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center, // 子组件居中对齐
            children: widget.imgList.asMap().entries.map((entry) {
              // 历 imgList 列表，并将其索引和值映射为一个条目 (entry)。
              return GestureDetector(
                onTap: () => _controller.animateToPage(entry.key),
                child: Container(
                  width: 10.0,
                  height: 10.0,
                  margin: const EdgeInsets.symmetric(
                      // 通过 margin 设置上下 8.0、左右 4.0 的间距
                      vertical: 8.0,
                      horizontal: 4.0),
                  decoration: BoxDecoration(
                    // 将其绘制为圆形,并设置激活时颜色为绿色，否则为白色。
                    shape: BoxShape.circle,
                    color: _current == entry.key ? Colors.green : Colors.white,
                  ),
                ),
              );
            }).toList(),
          ),
        ),
      ],
    );
  }
}
